import React from 'react';
import {enquireScreen} from 'enquire-js';

import Header from './header';
import Banner from './banner';
import JoinTW from './joinTW';
import ProgramList from './program-list';
import GrowthData from './growth-data';
import Campus from './campus';
import GrowthPath from './growth-path';
import Footer from './footer';
import 'react-github-button/assets/style.css'
import './static/antMotionStyle.less'

import {
  BannerDataSource,
  CampusDataSource,
  FooterDataSource,
  GrowthDataSource,
  GrowthPathDataSource,
  HeaderDataSource,
  JoinTWDataSource,
  ProgramListDataSource,
} from './data.source';

let isMobile;
enquireScreen((b) => {
  isMobile = b;
});

const { location } = window;

export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isMobile,
      show: !location.port, // 如果不是 dva 2.0 请删除
    };
  }

  componentDidMount() {
    // 适配手机屏幕;
    enquireScreen((b) => {
      this.setState({ isMobile: !!b });
    });
    // dva 2.0 样式在组件渲染之后动态加载，导致滚动组件不生效；线上不影响；
    /* 如果不是 dva 2.0 请删除 start */
    if (location.port) {
      // 样式 build 时间在 200-300ms 之间;
      setTimeout(() => {
        this.setState({
          show: true,
        });
      }, 500);
    }
    /* 如果不是 dva 2.0 请删除 end */
  }

  render() {
    const children = [
      <Header
        id="header"
        key="header"
        dataSource={HeaderDataSource}
        isMobile={this.state.isMobile}
      />,
      <Banner
        id="Banner2_0"
        key="Banner2_0"
        dataSource={BannerDataSource}
        isMobile={this.state.isMobile}
      />,
      <JoinTW
        id="Content6_0"
        key="Content6_0"
        dataSource={JoinTWDataSource}
        isMobile={this.state.isMobile}
      />,
      <GrowthData
        id="Content5_0"
        key="Content5_0"
        dataSource={GrowthDataSource}
        isMobile={this.state.isMobile}
      />,
      <Campus
        id="Content1_0"
        key="Content1_0"
        dataSource={CampusDataSource}
        isMobile={this.state.isMobile}
      />,
      <GrowthPath
        id="Content13_0"
        key="Content13_0"
        dataSource={GrowthPathDataSource}
        isMobile={this.state.isMobile}
      />,
      <ProgramList
        id="Content5_1"
        key="Content5_1"
        dataSource={ProgramListDataSource}
        isMobile={this.state.isMobile}
      />,
      <Footer
        id="Footer0_0"
        key="Footer0_0"
        dataSource={FooterDataSource}
        isMobile={this.state.isMobile}
      />,
    ];
    return (
      <div
        className="templates-wrapper"
        ref={(d) => {
          this.dom = d;
        }}
      >
        {/* 如果不是 dva 2.0 替换成 {children} start */}
        {this.state.show && children}
        {/* 如果不是 dva 2.0 替换成 {children} end */}
      </div>
    );
  }
}
